<script setup>
import { ref, onMounted } from "vue";
import {addAddressAPI, changeAddressAPI, getOrderAPI, submitOrderAPI} from "@/api/order.js";
import { ElMessage } from "element-plus";
import { regionData, codeToText } from "element-china-area-data";
import router from "@/router/index.js";
import {useCartStore} from "@/stores/cart.js";

const checkInfo = ref({})  // 订单列表
const curAddress = ref({})  // 默认地址对象
const addressList = ref([])
const summary = ref({})

const isSwitch = ref(false)

const getOrderData = async () => {
  const res = await getOrderAPI()
  checkInfo.value = res.result.goods
  addressList.value = res.result.userAddresses
  summary.value = res.result.summary
  curAddress.value = addressList.value.find(item =>
    item.isDefault === 0)
}

onMounted(() => {
  getOrderData()
})

const switchAddress = (item) => {
  addressList.value.forEach((item) => item.isDefault = 1)
  curAddress.value = item
  item.isDefault = 0
}

const closeDialog = () => {
  isSwitch.value = false
  getOrderData()
}

const submitSwitch = async () => {
  const item = addressList.value.find(item => item.isDefault === 0)
  await changeAddressAPI(item)
  isSwitch.value = false
  ElMessage.success('修改成功')
}

const isAdd = ref(false)
const selectedAddress = ref([])
const form = ref({
  receiver: "",
  contact: '',
  isDefault: 1,
  address: '',
  postalCode: '',
  addressTags: '家',
  provinceCode: '',
  cityCode: '123456',
  countyCode: '',
  fullLocation: ''
})

const rules = ref({
  receiver: [
    { required: true, message: '姓名不为空', trigger: "blur" },
  ],
  contact: [
    { required: true, message: '电话不为空', trigger: "blur" },
  ],
  address: [
    { required: true, message: '详细地址不为空', trigger: "blur" },
  ],
})

const addAddress = async () => {
  form.value.provinceCode = selectedAddress.value[0]
  form.value.cityCode = selectedAddress.value[1]
  form.value.countyCode = selectedAddress.value[2]
  form.value.fullLocation = selectedAddress.value.map(
    item => codeToText[item]
  ).join(' ')
  await addAddressAPI(form.value)
  await getOrderData()
  ElMessage.success('添加成功')
  isAdd.value = false
}

const cartStore = useCartStore()

const submitOrder = async () => {
  const res = await submitOrderAPI({
    deliveryTimeType: 1,
    payType: 1,
    payChannel: 1,
    buyerMessage: '',
    goods: checkInfo.value,
    addressId: curAddress.value.id
  })
  ElMessage.success('提交成功')
  await router.push(`/payment/${res.result.id}`)
  await cartStore.updateCartList()
}

</script>

<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">收货地址</h3>
        <div class="box-body">
          <div class="address">
            <div class="text">
              <div class="none" v-if="!curAddress">
                您需要先添加收货地址才可提交订单。
              </div>
              <ul v-else>
                <li><span>收<i />货<i />人：</span>{{ curAddress.receiver }}</li>
                <li><span>联系方式：</span>{{ curAddress.contact }}</li>
                <li>
                  <span>收货地址：</span>
                  {{ curAddress.fullLocation }} {{ curAddress.address }}
                </li>
              </ul>
            </div>
            <div class="action">
              <el-button size="large" @click="isSwitch = true">切换地址</el-button>
              <el-button size="large" @click="isAdd = true">添加地址</el-button>
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <h3 class="box-title">商品信息</h3>
        <div class="box-body">
          <table class="goods">
            <thead>
            <tr>
              <th width="520">商品信息</th>
              <th width="170">单价</th>
              <th width="170">数量</th>
              <th width="170">小计</th>
              <th width="170">实付</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in checkInfo" :key="i.id">
              <td>
                <a href="javascript:" class="info">
                  <img :src="i.picture" alt="">
                  <div class="right">
                    <p>{{ i.name }}</p>
                    <p>{{ i.attrsText }}</p>
                  </div>
                </a>
              </td>
              <td>&yen;{{ i.price }}</td>
              <td>{{ i.count }}</td>
              <td>&yen;{{ (i.price * i.count).toFixed(2) }}</td>
              <td>&yen;{{ (i.price * i.count).toFixed(2) }}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- 配送时间 -->
        <h3 class="box-title">配送时间</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:">不限送货时间：周一至周日</a>
          <a class="my-btn" href="javascript:">工作日送货：周一至周五</a>
          <a class="my-btn" href="javascript:">双休日、假日送货：周六至周日</a>
        </div>
        <!-- 支付方式 -->
        <h3 class="box-title">支付方式</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:">在线支付</a>
          <a class="my-btn" href="javascript:">货到付款</a>
          <span style="color:#999">货到付款需付5元手续费</span>
        </div>
        <!-- 金额明细 -->
        <h3 class="box-title">金额明细</h3>
        <div class="box-body">
          <div class="total">
            <dl>
              <dt>商品件数：</dt>
              <dd>{{ summary.goodsCount }}件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>¥{{ summary?.totalPrice?.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥{{ summary?.postFee?.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">
                {{ summary?.totalPayPrice?.toFixed(2) }}
              </dd>
            </dl>
          </div>
        </div>
        <!-- 提交订单 -->
        <div class="submit">
          <el-button
            type="primary"
            size="large"
            @click="submitOrder"
          >提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 切换地址 -->
  <el-dialog
    v-model="isSwitch"
    title="切换收货地址" width="30%" center
    @close="closeDialog"
  >
    <div class="addressWrapper">
      <div class="text item"
           v-for="item in addressList"
           :key="item.id"
           :class="{active: curAddress.id === item.id}"
           @click="switchAddress(item)"
      >
        <ul>
          <li><span>收<i />货<i />人：</span>{{ item.receiver }} </li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li>
        </ul>
      </div>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitSwitch">确定</el-button>
    </span>
    </template>
  </el-dialog>
  <!-- 添加地址 -->
  <el-dialog
    title="添加收货地址" width="30%" center
    v-model="isAdd"
  >
    <el-row>
      <el-col :span="18">
        <el-form
          :label-position="'top'"
          :model="form"
          :rules="rules"
        >
          <el-form-item
            label="姓名"
            :label-position="'top'"
            prop="receiver"
          >
            <el-input v-model="form.receiver"></el-input>
          </el-form-item>
          <el-form-item
            label="联系方式"
            :label-position="'top'"
            prop="contact"
          >
            <el-input v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item
            label="收货地址"
            :label-position="'top'"
          >
            <el-cascader
              :options="regionData"
              v-model="selectedAddress"
              placeholder="请选择地址"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item
            label="详细地址"
            :label-position="'top'"
            prop="address"
          >
            <el-input
              v-model="form.address"
              placeholder="街道名 门牌号"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="footer">
      <el-row :gutter="20">
        <el-col :span="12">
          <div style="text-align: center">
            <el-button @click="isAdd=false">取消</el-button>
          </div>
        </el-col>
        <el-col :span='12'>
          <div style="text-align: center">
            <el-button type="primary" @click="addAddress">添加</el-button>
          </div>
        </el-col>
      </el-row>

    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.xtx-pay-checkout-page {
  margin-top: 20px;

  .wrapper {
    background: #fff;
    padding: 0 20px;

    .box-title {
      font-size: 16px;
      font-weight: normal;
      padding-left: 10px;
      line-height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }

    .box-body {
      padding: 20px 0;
    }
  }
}

.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    >ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          >i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    >a {
      color: $xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  .info {
    display: flex;
    text-align: left;

    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }

    .right {
      line-height: 24px;

      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }

  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }

    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;

      &:first-child {
        border-left: 1px solid #f5f5f5;
      }

      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}

.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;

  &.active,
  &:hover {
    border-color: $xtxColor;
  }
}

.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;

    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }

    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;

      &.price {
        font-size: 20px;
        color: $priceColor;
      }
    }
  }
}

.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}

.addressWrapper {
  max-height: 500px;
  overflow-y: auto;
}

.text {
  flex: 1;
  min-height: 90px;
  display: flex;
  align-items: center;

  &.item {
    border: 1px solid #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;

    &.active,
    &:hover {
      border-color: $xtxColor;
      background: lighten($xtxColor, 50%);
    }

    >ul {
      padding: 10px;
      font-size: 14px;
      line-height: 30px;
    }
  }
}
</style>
